<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>支持电脑手机端的幻灯片轮播代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/jflex.min.css" type="text/css" media="all">
<style>
	body { font-family: 'Roboto'; padding: 10px; }
	.flex { margin: 0 auto 20px; max-width: 768px; }
</style>
</head>
<body>

<div class="flex">
	<ul class="slides">
		<li data-title="Slide 1">
			<img alt="" src="img/1.jpg">
		</li>
		<li data-title="Slide 2">
			<img alt="" src="img/2.jpg">
		</li>
		<li data-title="Slide 3">
			<img alt="" src="img/3.jpg">
		</li>
	</ul>
</div>


<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jflex.min.js"></script>
<script type="text/javascript">
$('.flex').jFlex({
	autoplay: true
});
</script>

<div style="text-align:center;margin:50px 0;">
<p>说明：刷新页面自动轮播（同时标签同步切换）鼠标点击标签后立即切换，并停止自动轮播</p>
</div>
</body>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>